<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path:'/plan'}">入库申请审核</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path:'/contract'}">补货申请审核</el-breadcrumb-item>
    <el-breadcrumb-item >采购申请审核</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card >

  <el-row :gutter="20">
      <el-col :span="5"><el-input placeholder="请输入查询号码" v-model="queryinfo.search"  clearable @clear="getUserList">
        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
  </el-input></el-col>
  <template>
  <el-select v-model="usertext1"  clearable placeholder="审核人" style="width: 120px; margin-right: 6px;">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.auditor"
      :value="item.auditor">
    </el-option>
  </el-select>
  </template>
  <template>
  <el-select v-model="plantype"  clearable placeholder="申请类型" style="width: 120px; margin-right: 6px;">
    <el-option
      v-for="item in planList"
      :key="item.id"
      :label="item.plantype"
      :value="item.plantype">
    </el-option>
  </el-select>
  </template>
  <template>
  <el-select v-model="usertext3"  clearable placeholder="申请人" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.applyname"
      :value="item.applyname">
    </el-option>
  </el-select>
  </template>
  <template>
  <el-select v-model="state1"  clearable placeholder="申请状态" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in options"
      :key="item.value1"
      :label="item.label1"
      :value="item.label1">
    </el-option>
  </el-select>
  </template>
  <template>
  <el-select v-model="state2"  clearable placeholder="审核状态" style="width: 120px; margin-right: 6px;">
    <el-option
      v-for="item in options2"
      :key="item.value2"
      :label="item.label2"
      :value="item.label2">
    </el-option>
  </el-select>
  </template>

  </el-row>
  <div class="block" style="margin-top: 10px;">
  <el-date-picker
    v-model="data1"
    type="daterange"
    range-separator="至"
    start-placeholder="申请开始日期"
    end-placeholder="申请结束日期"
    style="margin-right: 10px;">
  </el-date-picker>
  <el-date-picker
    v-model="data2"
    type="daterange"
    range-separator="至"
    start-placeholder="审核开始日期"
    end-placeholder="审核结束日期"
    style="margin-right: 10px;">
  </el-date-picker>
  <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>

</div>
  <template>
      <el-table
      :data="currentPageData"
        border
        stripe

        >

        <el-table-column
         prop="id"
label="编号"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
          prop="applyid"
          label="申请单号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="applytype"
          label="申请类型"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="planid"
          label="计划单号"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="replenish"
          label="补货单号"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="applyname"
          label="申请人"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="applydata"
          label="申请日期"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="applystate"
          label="申请状态"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="auditor"
          label="审核人"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="auditordata"
          label="审核日期"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
        prop="auditorstate"
          label="审核状态"
          width="120%"
          align="center">

        </el-table-column>
        <el-table-column
          label="操作"
          width="130%"
          align="center">
          <template v-slot="">

              <el-tooltip  effect="dark" content="详细" placement="top">
                  <el-button type="primary" icon="el-icon-info" size="12px" circle @click="detail"></el-button>
      </el-tooltip>

          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-sizes="[1, 2, 3, 5,8,10]"
        :page-size="queryinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px;">
      </el-pagination>

    </div>
  </el-card>
  <el-dialog
  title="添加数据"
  :visible.sync="addDialogVisible"
  width="50%" @close="addchear">
  <el-form :model="addForm" :rules="addrules" ref="addFormref" label-width="70px">
  <el-form-item label="用户名" prop="name">
    <el-input v-model="addForm.name"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="addForm.email"></el-input>
  </el-form-item>
  <el-form-item label="电话" prop="phone">
    <el-input v-model="addForm.phone"></el-input>
  </el-form-item>
  <el-form-item label="角色" prop="Tname">
    <el-input v-model="addForm.Tname"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary">确 定</el-button>
  </span>
  </el-dialog>
  <!-- 添加用户 -->
  <el-dialog
  title="审核采购申请"
  :visible.sync="putusers"
  width="33%"

  >
  <span class="opinion">
    <el-form :inline="true" >
  <el-form-item >
    <el-input placeholder="审批意见" class="opininp"></el-input>
  </el-form-item>
    </el-form>
    <el-row class="opinbtu">
      <el-divider class="underline" ><i class="el-icon-s-check"></i></el-divider>
  <el-button type="success" round>审批通过</el-button>

  <el-button type="danger" round  >审批驳回</el-button>
  </el-row>
  </span>
  </el-dialog>
  <!-- 修改用户 -->
    </div>
  </template>
<script>
import axios from 'axios'
export default {
  name: 'PurchaseContract',
  data () {
    return {
      plantype: '',
      data1: '',
      data2: '',
      data3: '',
      state1: '',
      state2: '',
      usertext1: '',
      usertext2: '',
      usertext3: '',
      listtest: [],
      userinfo: [],
      total: 0,
      addDialogVisible: false,
      queryinfo: {
        search: '',
        pagenum: 1,
        pageSize: 5
      },
      addForm: {
      },
      addFormref: {},
      addrules: {
      },
      putusers: false,
      options: [{
        value1: '选项1',
        label1: '未提交'
      }, {
        value1: '选项2',
        label1: '待审核'
      }, {
        value1: '选项3',
        label1: '已审核'
      }],
      options2: [{
        value2: '选项1',
        label2: '通过'
      }, {
        value2: '选项2',
        label2: '驳回'
      }],
      planList: [{
        id: '选项1',
        plantype: '计划申请'
      }, {
        id: '选项2',
        plantype: '补货申请'
      }]

    }
  },
  methods: {
    // 获取列表V
    async getUserList () {
      const res = await axios.get('/cart', {
        params:
          this.queryinfo

      })
      this.listtest = res.data.user
      this.total = res.data.total
    },

    // 获取页码V
    async getPage () {
      const res = await axios.get('/cart')
      this.queryinfo.pagenum = res.data.pagenum
      this.queryinfo.pageSize = res.data.pageSize
      this.getUserList()
    },

    handleSizeChange (newsize) {
      this.queryinfo.pageSize = newsize
    },
    handleCurrentChange (newnum) {
      this.queryinfo.pagenum = newnum
    },
    // 更新用户状态V
    addchear () {
      this.$refs.addFormref.resetFields()
    },

    detail () {
      this.putusers = true
    },
    refresh () {
      this.plantype = ''
      this.data1 = ''
      this.data2 = ''
      this.data3 = ''
      this.state1 = ''
      this.state2 = ''
      this.usertext1 = ''
      this.usertext2 = ''
      this.usertext3 = ''
      this.queryinfo.search = ''
    }
  },
  components: {},
  computed: {
    currentPageData () {
      const start = (this.queryinfo.pagenum - 1) * this.queryinfo.pageSize
      const end = start + this.queryinfo.pageSize
      return this.listtest.slice(start, end)
    }
  },
  mounted () {
    this.getUserList()
  }
}
</script>
  <style lang="less" scoped>
  .underline{
    position: relative;
    right: 142px;
  }
  .data{
  margin-top: 12px;
  }
  .opinion{
  position: relative;
  left: 100px;
  width: 200px;
  height: 200px;
  }
  .opininp{
  box-sizing: border-box;
  position: relative;
  right: 90px;
  width: 500px;
  }
  .opinbtu{
  position: relative;
  left: 50px;
  padding-right: 20px;
  top: 20px;
  }
  .classify{
  position: relative;
  right: 10px;
  width: 93px;
  }
  </style>
